<template>
    <div>
        <userID></userID>
        <NavigationBar></NavigationBar>
        <div class="contaion">
        
        <div class="topItem">
            <div class="hompage">
                <a href="#/home" class="active">首页</a>
            </div>
            <van-icon name="arrow" />
            <div class="homepage">
                <a href="" class="active">购物车</a>
            </div>
            <van-icon name="arrow" />
            <div>
                <span>填写订单</span>
            </div>
        </div>
        <div class="wrapper">
            <h3 class="box_title">收货地址</h3>
            <div class="box_body">
                <div class="address">
                   <div class="text">
                       <ul>
                           <li>
                               <span>
                                   收
                                   <i></i>
                                    货
                                   <i></i>
                                    人：
                                </span>
                               "123456"
                           </li>
                           <li>
                               <span>联系方式：</span>
                               "123****456"
                           </li>
                           <li>
                               <span>收货地址：</span>
                               "湖北省荆州市松滋市胜多负少"
                           </li>
                       </ul>
                       <a href="javascript:;">修改地址</a>
                   </div>
                   <div class="action">
                       <button class="btn">切换地址</button>
                       <button class="btn">添加地址</button>
                   </div>
                </div>
            </div>
            <h3 class="box_title">商品信息</h3>
            <div class="box_body">
               <table class="goods">
                   <tr>
                      <td width="520">商品信息</td> 
                      <td width="170">单价</td>
                      <td width="170">数量</td>
                      <td width="170">小计</td>
                      <td width="170">实付</td>
                   </tr>
                   <tbody>
                    <tr v-for="(item) in list" :key="item.id">
                       <td>
                           <a href="" class="info">
                               <img src="https://yanxuan-item.nosdn.127.net/5f62c7ab543b1152383a0e9941c09bfd.png" alt="">
                                <div class="right">
                                    <p>{{item.name}}</p>
                                    <p>{{item.attrsText}}</p>
                                </div>
                           </a>
                       </td>
                       <td>{{item.payPrice}}</td>
                       <td>{{item.count}}</td>
                       <td>{{item.payPrice}}</td>
                       <td>{{item.totalPayPrice}}</td>
                   </tr>
                </tbody>
               </table> 
               
            </div>
            <h3 class="box_title">配送时间</h3>
            <div class="box_body">
                <a href="javascript:;" style="border:1px solid #27ba9b" class="my_btn active">不限送货时间：周一至周日</a>
                <a href="javascript:;" class="my_btn active">工作日送货：周一至周五</a>
                <a href="javascript:;" class="my_btn active">双休日、假日送货：周六至周日</a>
            </div>
            <h3 class="box_title">支付方式</h3>
            <div class="box_body">
                <a href="javascript:;" style="border:1px solid #27ba9b" class="my_btn active">在线支付</a>
                <a href="javascript:;" class="my_btn active">在线支付</a>
                <span style="color:#999">货到付款需付5元手续费</span>
            </div>
            <h3 class="box_title">金额明细</h3>
            <div class="box_body">
                <div class="total">
                    <dl>
                        <dt>商品件数：</dt>
                        <dd>0件</dd>
                    </dl>
                    <dl>
                        <dt>商品总价：</dt>
                        <dd>¥0</dd>
                    </dl>
                    <dl>
                       <dt>
                           运
                           <i></i>
                           费：
                       </dt>
                       <dd>¥8</dd> 
                    </dl>
                    <dl>
                        <dt>应付总额：</dt>
                        <dd>¥8173.8</dd>
                    </dl>
                </div>
            </div> 
            <div class="submit">
                <button class="btn">提交订单</button>
            </div>
        </div>
        
    </div>
    <bottom></bottom>
    </div>
    
</template>

<script>
import bottom from '@/components/bottom.vue'
import NavigationBar from '@/components/NavigationBar.vue'
import userID from '@/components/userID.vue'
export default {
    data(){
      return {
          list:[]
      }  
    },
    components:{
        bottom,
        NavigationBar,
        userID,
    },
    mounted(){
        this.$.getOrders().then((res)=>{
            this.list = res.data.result.goods
            console.log(this.list);
        })
    }
}
</script>

<style lang="less" scoped>
    .contaion{
        width: 1240px;
        margin: 0 auto;
        position: relative;
        background: #f5f5f5;
        .wrapper{
            background: #fff;
            padding: 0 20px;
            .box_title{
                font-size: 16px;
                font-weight: 400;
                padding-left: 10px;
                line-height: 70px;
                border-bottom: 1px solid #f5f5f5
            }
            .box_body{
                padding: 20px 0;
                font-size:14px;
                .address{
                    border: 1px solid #f5f5f5;
                    display: flex;
                    align-items: center;
                    .text{
                        flex: 1;
                        min-height: 90px;
                        display: flex;
                        align-items: center;
                        ul{
                            flex: 1;
                            padding: 20px;
                            li{
                                line-height: 30px;
                                span{
                                        color: #999;
                                        margin-right: 5px;
                                }
                                i{
                                    width: .1em;
                                    display: inline-block
                                }
                            }
                        }
                        a{
                            color: #27ba9b;
                            width: 160px;
                            text-align: center;
                            height: 90px;
                            line-height: 90px;
                            border-right: 1px solid #f5f5f5
                        }
                    }
                    .action{
                        width: 420px;
                        text-align: center;
                        :first-child{
                            margin-right: 10px;
                        }
                        button{
                            outline: none;
                            background: #fff;
                            text-align: center;
                        }
                        .btn{
                                width: 140px;
                                height: 46px;
                                line-height: 44px;
                                font-size: 14px;
                                border:1px solid #e4e4e4;
                                color: #666;
                        }
                    }
                }
                .goods{
                    width: 100%;
                    border-collapse: collapse;
                    tr{
                        :first-child{
                            border-left:1px solid #f5f5f5;
                        }
                        td{
                            text-align: center;
                            padding: 20px;
                            border-bottom: 1px solid #f5f5f5;
                            background: #f5f5f5;
                            font-weight: 400;
                        }
                    }
                    tbody{
                        tr{
                            td{
                                background: #fff !important;
                                .info{
                                    display: flex;
                                    text-align: left;
                                    color: #333;
                                    img{
                                        width: 70px;
                                        height: 70px;
                                        margin-right: 20px;
                                    }
                                    .right{
                                        line-height: 24px;
                                    }
                                }
                            }
                        }
                    }
                }
                .active:hover{
                    border:1px solid #27ba9b;
                }
                
                .my_btn{
                    width: 228px;
                    height: 50px;
                    border: 1px solid #e4e4e4;
                    text-align: center;
                    line-height: 48px;
                    margin-right: 25px;
                    color: #666;
                    display: inline-block;
                }
                .total dl{
                        display: flex;
                        justify-content: flex-end;
                        line-height: 50px;
                        dd{
                            width: 240px;
                            text-align: right;
                            padding-right: 70px;
                        }
                }
            }
            .submit{
                text-align: right;
                // padding: 60px;
                margin-top:-20px;
                margin-right:60px;
                border-top: 1px solid #f5f5f5;
                .btn{
                    border:1px solid #27ba9b;
                    background: #27ba9b;
                    color: #fff;
                    width: 180px;
                    height: 50px;
                    font-size: 16px;
                }
            }
        }
    }
    .topItem{
        font-size:14px;
        display: flex;
        padding: 25px 10px;
        a{
            color:#666;
        }
        .active:hover{
            color:#27ba9b;
        }
        i{
            font-size: 12px;
            margin-left: 5px;
            margin-right: 5px;
            line-height: 22px;
        }
    }
</style>